<template>
    <ul>
        <li v-for="item in list" :key="item.id">
            {{ item.name }}+{{ item.age }}
        </li>
    </ul>
</template>


<script setup lang="ts" name="PropsInfo">
import type { Person } from '@/types/Props';
import { defineProps } from 'vue'
// 第一种写法：仅接收
// const props = defineProps(['list'])

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{ list?: Person }>(), {
    list: () => [{ id: 'asdasg01', name: '小猪佩奇', age: 18 }]
})
console.log(props)
</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>